<template>
  <div>
    <Input />
    <div class="hot-car">
      <div
        class="caritem"
        v-for="item in HotCar"
        :key="item.brand_id"
        @click="carsDetail(item)"
      >
        <img :src="item.image_url" alt="" /><span>{{ item.brand_name }}</span>
      </div>
    </div>
    <HotCar class="hot-cars" />
    <IndexBar :AllCar="AllCar" />
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar.vue";
import IndexBar from "@/components/indexBar.vue";
import { get } from "@/tool/get";
import { onBeforeMount, reactive, toRefs } from "vue";
import Input from "@/components/input.vue";
import HotCar from "@/components/hotCar.vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  name: "select_",
  setup() {
    const router = useRouter();
    onBeforeMount(async () => {
      let _data = JSON.parse(localStorage.getItem(import.meta.env.VITE_APP_INDEXBARCARS));
      if (new Date().getTime() > import.meta.env.VITE_APP_UPTIME && localStorage.getItem(import.meta.env.VITE_APP_UPDATECOUNT) != 1) {
        _data = null
        localStorage.removeItem(import.meta.env.VITE_APP_INDEXBARCARS)
        localStorage.setItem(import.meta.env.VITE_APP_UPDATECOUNT, 1)
      }
      if (_data) {
        state.list = _data[0].info.series;
        state.HotCar = _data[0].info.brand;
        state.AllCar = _data;
        state.AllCar.splice(0, 3);
      } else {
         get("/data/carData").then((res) => {
          localStorage.setItem(import.meta.env.VITE_APP_INDEXBARCARS, JSON.stringify(res.data.data));
          state.list = res.data.data[0].info.series;
          state.HotCar = res.data.data[0].info.brand;
          state.AllCar = res.data;
          state.AllCar.splice(0, 3);
          D;
        });
      }
    });
    const carsDetail = (item) => {
      item.brand_id = item.brand_id || item.info.brand_id;
      router.push({ path: `/select/${item.brand_id}` });
      Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "加载中...",
      });
    };
    const state = reactive({
      list: [],
      HotCar: [],
      AllCar: [],
    });
    return {
      ...toRefs(state),
      carsDetail,
    };
  },
  components: {
    Tabbar,
    IndexBar,
    Input,
    HotCar,
  },
};
</script>

<style lang="less" scoped>
.hot-cars {
  padding-bottom: 10px;
}
.hot-car {
  display: flex;
  justify-content: space-around;
  -webkit-box-align: center;
  align-items: center;
  padding-top: 40px;
  min-height: 30px;
  .caritem {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-size: 14px;
    color: rgb(102, 102, 102);
    img {
      width: 25px;
      height: 25px;
    }
  }
}
</style>